<template>
  <div class="login-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>login</span>
      </div>
      <el-form label-width="80px">
        <el-form-item label="account:">
          <el-input v-model="account" placeholder="account" style="width: 250px"/>
        </el-form-item>
        <el-form-item label="password:">
          <el-input v-model="password" placeholder="password" type="password" style="width: 250px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 250px" @click="submit()">submit</el-button>
          <p class="errorInfo">{{errorInfo}}</p>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        版权所有：
        <a style="text-decoration: none" :href="url">
          一点浩然气，千里快哉风。
        </a>
      </div>
    </el-card>
  </div>
</template>

<script>
import  axios from 'axios';
import { hex_md5 } from "@/util/md5";
import { getServerUrl } from "@/config/sys";

export default {
  name: 'login',
  data() {
    return {
      account: '',
      password: '',
      errorInfo: '',
      url: 'https://hanyu.baidu.com/shici/detail?pid=bf35c1ac5fd4403b8836ea67320a99a0'
        +'&from=kg0&highlight=%E4%B8%80%E7%82%B9%E6%B5%A9%E7%84%B6%E6%B0%94%EF%BC%8C%E5%8D%83%E9%87%8C%E5%BF%AB%E5%93%89%E9%A3%8E'
    }
  },
  methods: {
    submit() {
      if (this.account.trim() == '') {
        this.errorInfo = 'account can not be null!';
        return;
      }
      if (this.password.trim() == '') {
        this.errorInfo = 'password can not be null!';
        return;
      }
      let FRONT_SALT = "browser";
      let url = getServerUrl("login");
      axios.post(url,{"account": this.account, "password": hex_md5(FRONT_SALT + this.password)})
      .then(response => {
        let data = response.data;
        if (data.code == 0) {
            window.sessionStorage.setItem("token", data.msg)
          this.$router.replace("/main");
        } else {
          this.errorInfo = data.msg;
        }
      }).catch(error => {
        this.errorInfo = error;
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login-container {
    display: flex;
    margin-top: 150px;
    justify-content: center;
  }
  .errorInfo {
    color: red;
    font-weight: bold;
    text-align: center;
  }
</style>
